<template>
  <a-card>
    <a-modal
      title="挂号管理"
      :width="800"
      :visible="modalMisible"
      :plain="true"
      :model="forms"
      @ok="submitOk"
      @cancel="modalMisible=false"
    >
<!--      :rules="rules"-->
      <a-form>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="医生" :required="true">
          <a-input placeholder="医生姓名" v-model="searchName" style="width: 200px;"/>
          <a-button @click="search" style="margin-left: 10px;">搜索</a-button>
        </a-form-item>
        <a-form-item :labelCol="labelCol" style="padding: 10px 50px;">
          <span style="padding-right: 20px;" v-for="val in searchData">
            <input type="radio" @change="chooseDoctor" name="doctor" :value="val.id" v-model="doctorId"/> {{val.name}}
          </span>
        </a-form-item>
      </a-form>
      <a-form :form="form" v-show="formShow">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="号源医院" :required="true" hasFeedback>
          <a-select v-model="forms.registerHospitalId" style="width: 300px;">
            <a-select-option v-for="(item,index) in hospitals" :value="item.id" :key="item.id" @click="selectHospital(item)">{{ item.name }}</a-select-option>
          </a-select>
<!--          <a-button style="margin-left: 25px;" @click="addHospital">+新增医院</a-button>-->
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="选择号种" :required="true" hasFeedback>
          <a-select v-model="forms.type">
            <a-select-option value="普通号">普通号</a-select-option>
            <a-select-option value="专家号">专家号</a-select-option>
            <a-select-option value="特需号">特需号</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="日期" :required="true" hasFeedback>
          <j-date placeholder="请选择日期" v-model="forms.visitTime" :trigger-change="true" style="width: 100%"/>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="时间段" :required="true" hasFeedback>
          <a-select v-model="forms.visitPart">
            <a-select-option value="上午">上午</a-select-option>
            <a-select-option value="下午">下午</a-select-option>
            <a-select-option value="晚上">晚上</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="开始序号（包含开始）" :required="true" hasFeedback>
          <a-input v-model="forms.numStart" placeholder="请输入号源开始序号" :min="1" :max="1000" type="number"/>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="号源总数" :required="true" hasFeedback>
          <a-input v-model="forms.count" placeholder="号源总数" :min="1" :max="1000" type="number"/>
        </a-form-item>

        <a-form-item
          label="价格"
          :required="true"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          hasFeedback
          validateStatus="success">
          <a-input placeholder="请输入价格" :min="0" :max="1000" prefix="￥" type="number" v-model.number="forms.price" />
        </a-form-item>

      </a-form>
    </a-modal>

  </a-card>
</template>

<script>
import { httpAction, getAction,putAction } from '@api/manage'
import JDate from '@/components/jeecg/JDate'
export default {
  name: 'DoctorRegisterAddModal',
  components: {
    JDate,
  },
  inject: ['reload'],

  data() {
    return {
      title: '挂号管理',
      modalMisible: false,

      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      labelCols: {
        xs: { span: 12 },
        sm: { span: 8 },
      },
      wrapperCols: {
        xs: { span: 12 },
        sm: { span: 10 },
      },
      formShow:false,
      searchName:'', // 医生的姓名
      searchData:{}, // 搜索到的数据
      doctorId:{}, // 选择的医生id
      forms:{
        doctorId: '', // 医生id
        registerHospitalId: "",
        department: '',  //部门id
        type: '',
        visitTime: '',
        visitPart: '',
        numStart: 1,
        numEnd: 1,
        surplusNum: 1,
        count: 1,
        price: '',
      },
      hospitals:{},  //医院信息
      // departments:{},//科室信息
      form: this.$form.createForm(this),
      validatorRules: {
        registerHospitalId: {
          rules: [
            { required: true, message: '请选择医院' },
          ]
        },
      },

      url: {
        add: "/doctorRegister/doctorRegister/add",
        addSave: "/doctorRegister/doctorRegister/add",
        searchDoctor: "/doctorRegister/doctorRegister/searchDoctor",
        registerRatioCheck: "/doctorRegister/doctorRegister/registerRatioCheck",
      },
    }
  },
  methods: {
    viewShow() {
      this.forms.doctorId = 50180 //record.id;
      var param = {"doctorId":50180}
      // var param = {"doctorId":record.id};

      getAction(this.url.add,param).then(res => {
        console.log(res.result)
        this.hospitals = res.result.hospitals;
        this.forms.department = res.result.doctor.department;

        this.modalMisible = true
      })
    },
    // 搜索事件
    search(){
      var param = { 'name' : this.searchName }
      getAction(this.url.searchDoctor, param).then((res)=>{
        if(res.result.length == 0){
          this.searchData = []
          this.$message.warning("搜索有误！")
        }else{
          this.searchData = res.result
        }
      }).catch((error)=>{
        console.log(error);
      })
    },
    // 选择搜索的医生，检查该医生是否已设置挂号分成比例
    chooseDoctor(){
      var param = {"doctorId":this.doctorId}
      getAction(this.url.registerRatioCheck, param).then((res)=>{
        if(res.result != null){
          this.formShow = true
          this.forms.doctorId = res.result.id
          this.forms.department = res.result.department
        }else{
          // 初始化forms
          this.forms = {
            doctorId: '', // 医生id
            registerHospitalId: "",
            department: '',  //部门id
            type: '',
            visitTime: '',
            visitPart: '',
            numStart: 1,
            numEnd: 1,
            surplusNum: 1,
            count: 1,
            price: ''
          }
          // 提示添加挂号分成比例
          this.$message.warning("请先添加医生的挂号分成比例！")
          // 关闭form表单
          this.formShow = false
        }
      }).catch((error)=>{
        console.log(error);
      })
    },

    //选择医院
    selectHospital(hospital){
      this.forms.registerHospitalId = hospital.id;
    },

    submitOk () {
      if(this.checkForms(this.forms)){
        console.log(this.forms)
        this.forms.surplusNum = this.forms.count
        httpAction(this.url.addSave, this.forms,'post').then((res)=>{
          if(res.code === 200){
            this.$message.success(res.message)

            this.reload()
          }else{
            this.$message.warning(res.message)
          }
        }).catch((error)=>{
          console.log(error);
        })
      }
    },

    //校验表单信息
    checkForms(forms){
      if(forms.registerHospitalId == ''){
        this.$message.warning("请选择挂号医院！")
        return false
      }else if(forms.type == '') {
        this.$message.warning("请选择号种类型！")
        return false
      }else if(forms.visitTime == ''){
        this.$message.warning("请选择日期！")
        return false
      }else if(forms.visitPart == ''){
        this.$message.warning("请选择时间段！")
        return false
      }else if(forms.visitPart == ''){
        this.$message.warning("请选择时间段！")
        return false
      }else if(forms.numStart <= 0){
        this.$message.warning("开始序号有误！")
        return false
      }else if(forms.numStart >= 1000){
        this.$message.warning("开始序号不可超过1000！")
        return false
      }else if(forms.count <= 0){
        this.$message.warning("号源总数有误！")
        return false
      }else if(forms.count >= 1000){
        this.$message.warning("号源总数不可超过1000！")
        return false
      }else if(forms.price == '' || forms.price < 0){
        this.$message.warning("请输入价格或价格输入有误！")
        return false
      }else{
        return true
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .ant-input-number {
    margin-right: 20px;
    width: 360px;
  }

</style>